<template>
  <div class="tag">
    <div class="tag_content">
      <el-badge v-for="(item,index) in tagList" :key="index" :value="item.articleCount" class="item">
        <el-button :style="{background: $route.params.id == item.id ? '#ecf5ff' :''}"
          @click="goto({params:{id:item.id}})">{{item.name}}</el-button>
      </el-badge>
    </div>

    <ArticleList :list="list" :isNull="isNull"></ArticleList>
    <!-- 分页 条目小于10 则隐藏 -->
    <el-pagination v-if="total > 10" @current-change="changPage" layout="prev, pager, next" :total="total">
    </el-pagination>

  </div>
</template>

<script>
import ArticleList from '@/views/components/ArticleList'

export default {
  name: 'Tag',
  components: {
    ArticleList,
  },
  data() {
    return {
      activeName: 'second',
      tagList: '',
      list: [],
      total: 0,
      isNull: false,
    }
  },
  watch: {
    $route() {
      // 根据路由变化 改变
      this.getTagDetail(Number(this.$route.params.id))
    },
  },
  mounted() {
    this.getTagList()
    this.getTagDetail(Number(this.$route.params.id))
  },
  methods: {
    goto(path) {
      this.$router.push(path)
    },
    changPage(page){
      this.getTagDetail(Number(this.$route.params.id),page)
    },
    // 跳转文章
    toArticleDetail() {
      this.goto()
    },
    // 获取标签下的文章列表
    getTagDetail(id, page = 1, size = 10) {
      this.$router.push({
        params: {
          id,
        },
      })
      this.list = []
      this.$api.httpTagDetail({ id, page, size }).then((res) => {
        if (res.code == 200) {
          let list = res.data.rows || []
          list.forEach((item) => {
            item.article.tags = item.tags
            this.list.push(item.article)
          })
          if (this.list.length == 0){
            this.isNull = true
          } else{
            this.isNull = false
          }
          this.total = res.data.meta.total
        }
      })
    },
    // 获取标签
    getTagList() {
      this.$api.httpTagList().then((res) => {
        if (res.code == 200) {
          this.tagList = res.data || []
        }
      })
    },
  },
}
</script>

<style scoped lang="scss">
.tag {
  width: 1200px;
  margin: auto;
  .tag_content {
    margin: 40px 0;
    .item {
      margin-top: 10px;
      margin-right: 40px;
    }
  }
}
@media screen and (max-width: 1200px) {
  .tag {
    width: 100%!important;
    .tag_content {
      margin: 10px 0;
    }
  }
}
</style>